<template>
    <a-card>
        <div>
            <a-form layout="horizontal">
                <div class="fold">
                    <a-row>
                        <a-col :md="8" :sm="24">
                            <a-form-item label="工号" :labelCol="{ span: 8 }" :wrapperCol="{ span: 15, offset: 1 }">
                                <a-input v-model="accountNumber" placeholder="请输入" allowClear />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row v-if="advanced"> </a-row>
                </div>
                <span style="float: right; margin-top: 3px">
                    <a-button type="primary" @click="query">查询</a-button>
                </span>
            </a-form>
        </div>
        <div>
            <a-space class="operator">
                <a-button @click="showModal(0)" type="primary">新增角色</a-button>
                <a-modal :visible="visible" title="编辑角色" @ok="handleOk" @cancel="handleCancel" width="800px">
                    <a-form>
                        <a-form-item :label="$t('id')" v-show="false">
                            <a-input name="id" id="id" v-model="model.Id" v-show="false" />
                        </a-form-item>
                        <a-row>
                            <a-col :span="24">
                                <a-form-item :label-col="layout.labelCol" :wrapper-col="layout.wrapperCol" label="名称">
                                    <a-input v-model="model.Name" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-form-item :label-col="layout.labelCol" :wrapper-col="layout.wrapperCol" label="菜单权限">
                                <a-tree checkable default-expand-all :tree-data="treeData" v-model="checkedKeys" >
                                </a-tree>
                            </a-form-item>
                        </a-row>
                    </a-form>
                </a-modal>
            </a-space>

            <a-table :columns="columns" :dataSource="dataSource" :pagination="pagination"
                :rowKey="(dataSource) => dataSource.Id">
                <template slot="time" slot-scope="text,record">
                    {{ (record.UpdateTime ? record.UpdateTime : record.CreateTime) | dateTimeFormat }}
                </template>
                <template slot="status" slot-scope="text">
                    {{ text == 0 ? "否" : "是" }}
                </template>
                <div slot="action" slot-scope="text, record">
                    <a @click="showModal(record.Id)">
                        <a-icon type="edit" />
                        编辑
                    </a>
                    <a-popconfirm title="是否删除" @confirm="remove(record.Id)">
                        <a><a-icon type="delete" />删除</a>
                    </a-popconfirm>
                </div>
            </a-table>
        </div>
    </a-card>
</template>
  
<script>
import { roleService, menuService } from '/src/services'

const columns = [
    {
        title: '序号',
        customRender: (text, record, index) => `${index + 1}`,
    },
    {
        title: '角色名称',
        dataIndex: 'Name'
    },
    {
        title: '最后更新时间',
        width: 180,
        dataIndex: 'CreateTime',
        scopedSlots: { customRender: 'time' }
    },
    {
        title: '操作',
        scopedSlots: { customRender: 'action' }
    }
]

export default {
    name: 'UserList',
    filters: {
        dateTimeFormat(val) {
            if (val == null) return ''
            return val.substring(0, 10)
        }
    },
    data() {
        return {
            advanced: false,
            columns: columns,
            dataSource: [],
            selectedRows: [],
            bordered: true,
            pagination: {
                total: 0,
                current: 1,
                pageSize: 10,
                onChange: (current, pageSize) => {
                    this.pagination.pageSize = pageSize
                    this.pagination.current = current
                    this.initData()
                }
            },
            accountNumber: '',
            checkedKeys: [],
            treeData: {},
            model: {},
            visible: false,
            layout: {
                labelCol: { span: 6 },
                wrapperCol: { span: 16 }
            }
        }
    },
    watch: {
        checkedKeys: {
            handler(value) {
                if (value.length > 1 && value.find(item => item == '*')) {
                    this.checkedKeys = ['*']
                }
                console.log(value)
            }
        }
    },
    mounted: function () {
        this.initData()
        this.getMenu()
    },
    methods: {
        changesx(value) {
            this.model.IsValid = value
        },
        async initData() {
            this.dataSource = []
            let result = await roleService.list(
                this.accountNumber,
                this.pagination.current,
                this.pagination.pageSize
            )
            if (result && result.data) {
                this.dataSource = result.data.data
                this.pagination.total = result.data.total
            }
        },
        async getMenu() {
            let result = await menuService.getList()
            if (result && result.data) {
                this.treeData = result.data
            }
        },
        query() {
            this.pagination.current = 1
            this.initData()
        },
        async showModal(id) {
            this.visible = true
            if (id !== 0) {
                this.id = id
                let model = await roleService.detail(id)
                this.model = model.data
                this.checkedKeys = this.model.Permission.split(',')
            } else {
                this.model = { Id: 0, IsValid: true }
                this.checkedKeys = []
            }
        },
        async handleOk() {
            this.model.Permission = this.checkedKeys.join(',')
            var res = await roleService.save(this.model)
            if (res.data) {
                this.$message.success('保存成功')
                this.visible = false
                this.query()
            } else {
                this.$message.error('保存失败')
            }
        },
        handleCancel() {
            this.visible = false
        },
        async remove(id) {
            let result = await roleService.remove(id)
            if (result.data) {
                this.$message.success("删除成功", 3)
                this.initData()
            }else{
                this.$message.error("删除失败", 3)
            }
        },
        handleMenuClick(e) {
            if (e.key === 'delete') {
                this.remove()
            }
        }
    }
}
</script>
  
<style lang="less" scoped>
.search {
    margin-bottom: 54px;
}

.fold {
    width: calc(100% - 216px);
    display: inline-block;
}

.operator {
    margin-bottom: 18px;
}

@media screen and (max-width: 900px) {
    .fold {
        width: 100%;
    }
}
</style>
  